<!-- 救援小组 -->
<template>
  <el-card style="margin-top: 20px">
    <div slot="header" class="clearfix">
      <span>救援小组</span>
    </div>
    <el-card style="margin-top: 20px">
      <div class="xiaozu">
        <el-row style="margin-left: 21px">
          <el-col :span="8">
            <div class="zuzhang">
              <div style="width: 31px">组长</div>
              <el-input
              :disabled="titleDisabled"
                style="width: 69%; margin-left: 7px"
                v-model="groupleader.Membershipgroup"
                placeholder="请输入组长名称"
              />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="zuzhang" style="margin-left: -16px">
              <div style="width: 52px">副组长</div>
              <el-input
              :disabled="titleDisabled"
                style="width: 70%; margin-left: 7px"
                v-model="Deputygroupleader.MembershipDeputygroup"
                placeholder="请输入副组长名称"
              />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="zuzhang" style="margin-left: -16px">
              <div style="width: 65px">成员名称</div>
              <el-input
              :disabled="titleDisabled"
                style="width: 70%; margin-left: 7px"
                class="input"
                v-model="Groupmembers.Membershipcomposition"
                placeholder="请输入成员名称"
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row style="margin-top: 30px">
        <el-col :span="4">
          <el-card class="box-card1">
            <div slot="header" class="clearfix">
              <span>小组职责</span>
            </div>
            <div
              v-for="(item, index) in list"
              :key="index"
              class="textitem"
              :class="{ selected: selectedCard === item }"
              :style="{
                color: selectedCard === item ? '#038ff3' : 'initial',
                backgroundColor:
                  selectedCard === item ? 'rgb(153 153 154 / 19%)' : 'initial',
              }"
              @click="showCard(index)"
            >
              <span style="margin-left: 50px">{{ item.name }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="20">
          <el-card style="margin-left: 30px" v-if="selectedCard !== null">
            <div v-if="selectedCard.id === 1">
              <!-- 成员构成 -->
              <div class="zuzhi">
                <div class="chengyuan">成员构成</div>
                <el-input
                  disabled
                  class="chenginput"
                  v-model="groupleader.Membershipgroup"
                  placeholder="请输入成员构成"
                />
              </div>
              <!--应急职责  -->
              <div class="zuzhi">
                <div class="zuze">应急职责</div>
                <div class="yingji">
                  <div
                    v-for="(
                      content, contentIndex
                    ) in groupleader.Emergencyresponsibilitiesoftheteamleader"
                    :key="contentIndex"
                    class="xuhao"
                  >
                    <div class="wenzi">{{ contentIndex + 1 }}.</div>

                    <el-popover
                      placement="top-start"
                      width="300"
                      trigger="click"
                    >
                      <el-input
                        class="borderNone"
                        type="textarea"
                        autosize
                        size="medium"
                        resize="none"
                        v-model="content.value"
                        @input="teamupdateContentd(contentIndex)"
                      ></el-input>
                      <template slot="reference">
                        <el-input
                        :disabled="titleDisabled"
                          placeholder="请输入应急职责"
                          v-model="content.value"
                          @input="teamupdateContentd(contentIndex)"
                          class="yingjizhiz"
                        ></el-input>
                      </template>
                    </el-popover>
                    <div style="margin-left: 1%">
                      <el-button
                        v-if="
                          contentIndex ===
                          groupleader.Emergencyresponsibilitiesoftheteamleader
                            .length -
                            1
                        "
                        type="primary"
                        plain
                        @click="teamaddContentd(contentIndex)"
                        >+</el-button
                      >
                    </div>
                    <div style="margin-left: 1%">
                      <el-button
                        v-if="
                          contentIndex ===
                          groupleader.Emergencyresponsibilitiesoftheteamleader
                            .length -
                            1
                        "
                        type="danger"
                        plain
                        @click="teamremoveContentd(contentIndex)"
                        >-</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
              <!-- 职责要求 -->
              <div class="zuzhi">
                <div class="zuze">职责要求</div>
                <div class="yingji">
                  <div
                    v-for="(
                      content, contentIndex
                    ) in groupleader.Responsibilitiesandrequirementsoftheteamleader"
                    :key="contentIndex"
                    class="xuhao"
                  >
                    <div class="wenzi">{{ contentIndex + 1 }}.</div>

                    <el-popover
                      placement="top-start"
                      width="300"
                      trigger="click"
                    >
                      <el-input
                        class="borderNone"
                        type="textarea"
                        autosize
                        size="medium"
                        resize="none"
                        v-model="content.value"
                        @input="ResponsibilitiesupdateContentd(contentIndex)"
                      ></el-input>
                      <template slot="reference">
                        <el-input
                        :disabled="titleDisabled"
                          placeholder="请输入职责要求"
                          v-model="content.value"
                          @input="ResponsibilitiesupdateContentd(contentIndex)"
                          class="yingjizhiz"
                        ></el-input>
                      </template>
                    </el-popover>
                    <div style="margin-left: 1%">
                      <el-button
                        v-if="
                          contentIndex ===
                          groupleader
                            .Responsibilitiesandrequirementsoftheteamleader
                            .length -
                            1
                        "
                        type="primary"
                        plain
                        @click="ResponsibilitiesaddContentd(contentIndex)"
                        >+</el-button
                      >
                    </div>
                    <div style="margin-left: 1%">
                      <el-button
                        v-if="
                          contentIndex ===
                          groupleader
                            .Responsibilitiesandrequirementsoftheteamleader
                            .length -
                            1
                        "
                        type="danger"
                        plain
                        @click="ResponsibilitiesremoveContentd(contentIndex)"
                        >-</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="selectedCard.id === 2">
              <!-- 成员构成 -->
              <div class="zuzhi">
                <div class="chengyuan">成员构成</div>
                <el-input
                  class="chenginput"
                  disabled
                  v-model="Deputygroupleader.MembershipDeputygroup"
                  placeholder="请输入成员构成"
                />
              </div>
              <!-- 应急职责 -->
              <div class="zuzhi">
                <div class="zuze">应急职责</div>
                <div class="yingji">
                  <div
                    v-for="(
                      content, contentIndex
                    ) in Deputygroupleader.Emergencyresponsibilitiesofdeputyteamleader"
                    :key="contentIndex"
                    class="xuhao"
                  >
                    <div class="wenzi">{{ contentIndex + 1 }}.</div>
                    <el-popover
                      placement="top-start"
                      width="300"
                      trigger="click"
                    >
                      <el-input
                        class="borderNone"
                        type="textarea"
                        autosize
                        size="medium"
                        resize="none"
                        v-model="content.value"
                        @input="EmergencyupdateContentd(contentIndex)"
                      ></el-input>
                      <template slot="reference">
                        <el-input
                        :disabled="titleDisabled"
                          placeholder="请输入应急职责"
                          v-model="content.value"
                          @input="EmergencyupdateContentd(contentIndex)"
                          class="yingjizhiz"
                        ></el-input>
                      </template>
                    </el-popover>
                    <div style="margin-left: 1%">
                      <el-button
                        v-if="
                          contentIndex ===
                          Deputygroupleader
                            .Emergencyresponsibilitiesofdeputyteamleader
                            .length -
                            1
                        "
                        type="primary"
                        plain
                        @click="EmergencyaddContentd(contentIndex)"
                        >+</el-button
                      >
                    </div>
                    <div style="margin-left: 1%">
                      <el-button
                        v-if="
                          contentIndex ===
                          Deputygroupleader
                            .Emergencyresponsibilitiesofdeputyteamleader
                            .length -
                            1
                        "
                        type="danger"
                        plain
                        @click="EmergencyremoveContentd(contentIndex)"
                        >-</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="selectedCard.id === 3">
              <div class="zuzhi">
                <div class="chengyuan">成员构成</div>
                <el-input
                  disabled
                  class="chenginput"
                  v-model="Groupmembers.Membershipcomposition"
                  placeholder="请输入成员构成"
                />
              </div>
              <div
                style="margin-top: 30px"
                v-for="(item, itemIndex) in Groupmembers.Disposalstepslist"
                :key="itemIndex"
              >
                <div style="display: flex">
                  <div
                    style="
                      line-height: 36px;
                      font-size: 15px;
                      color: #606266;
                      font-weight: 700;
                      margin-right: 10px;
                    "
                  >
                    小组名称
                  </div>
                  <el-select
                  :disabled="titleDisabled"
                    style="margin-left: 22px; width: 372px"
                    v-model="item.GroupName"
                    placeholder="请选择小组名称"
                  >
                    <el-option
                      v-for="person in Processingpersonnelliest"
                      :key="person"
                      :label="person"
                      :value="person"
                    ></el-option>
                  </el-select>
                  <div style="margin-left: 1%">
                    <el-button
                      type="primary"
                      plain
                      v-if="
                        itemIndex === Groupmembers.Disposalstepslist.length - 1
                      "
                      @click="addContentWithDealExecutor(itemIndex)"
                      >+</el-button
                    >
                  </div>
                  <div style="margin-left: 1%">
                    <el-button
                      type="danger"
                      plain
                      @click="removeContent(itemIndex)"
                      >-</el-button
                    >
                  </div>
                </div>
                <div class="zuzhi">
                  <div
                    style="
                      line-height: 36px;
                      font-size: 15px;
                      color: #606266;
                      font-weight: 700;
                      width: 76px;
                      margin-top: 20px;
                    "
                  >
                    应急职责
                  </div>
                  <div class="yingji">
                    <div
                      v-for="(
                        content, contentIndex
                      ) in item.Emergencyresponsibilitiesofteammembers"
                      :key="contentIndex"
                      class="xuhao"
                    >
                      <div class="wenzi">{{ contentIndex + 1 }}.</div>

                      <el-popover
                        placement="top-start"
                        width="300"
                        trigger="click"
                      >
                        <el-input
                          class="borderNone"
                          type="textarea"
                          autosize
                          size="medium"
                          resize="none"
                          v-model="content.value"
                          @input="updateContent(itemIndex, contentIndex)"
                        ></el-input>
                        <template slot="reference">
                          <el-input
                          :disabled="titleDisabled"
                            placeholder="请输入应急职责"
                            v-model="content.value"
                            @input="updateContent(itemIndex, contentIndex)"
                            class="yingjizhiz"
                          ></el-input>
                        </template>
                      </el-popover>
                      <div style="margin-left: 1%">
                        <el-button
                          v-if="
                            contentIndex ===
                            item.Emergencyresponsibilitiesofteammembers.length -
                              1
                          "
                          type="primary"
                          plain
                          @click="addContents(itemIndex, contentIndex)"
                          >+</el-button
                        >
                      </div>
                      <div style="margin-left: 1%">
                        <el-button
                          v-if="
                            contentIndex ===
                            item.Emergencyresponsibilitiesofteammembers.length -
                              1
                          "
                          type="danger"
                          plain
                          @click="removeContents(itemIndex, contentIndex)"
                          >-</el-button
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </el-card>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  getLists,
  insertData,
  deletelist,
  ModifierList,
} from "../../../api/Genericmethods/GeneralQuery";
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: {},
  props: ["basicInformationForm", "parentPlanName", "title"],
  data() {
    return {
      list: [
        {
          id: 1,
          name: "组长",
        },
        {
          id: 2,
          name: "副组长",
        },
        {
          id: 3,
          name: "小组成员",
        },
      ],
      // 小组名称
      Processingpersonnelliest: ["信息联络组", "抢险救灾组", "疏散警戒组"],
      selectedCard: null,
      // 组长
      groupleader: {
        Membershipgroup: "",
        Responsibilitiesandrequirementsoftheteamleader: [
          { value: "" },
          { value: "" },
        ],
        Emergencyresponsibilitiesoftheteamleader: [
          { value: "" },
          { value: "" },
        ],
      },
      // 副组长
      Deputygroupleader: {
        MembershipDeputygroup: "",
        Emergencyresponsibilitiesofdeputyteamleader: [
          { value: "" },
          { value: "" },
        ],
      },
      // 小组成员
      Groupmembers: {
        Membershipcomposition: "",
        Disposalstepslist: [],
      },
    };
  },
  // 计算属性 类似于data概念
 computed: {
     // 标题
    titleDisabled() {
      return this.title === "详情"; // 判断标题是否为"详情"
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    xiaozu() {
      // 小组机构
      getLists("EmergPlan_SpecRspMrs_RscGroupInst")
        .then((data) => {
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            if (element.PlanName === this.parentPlanName.PlanName) {
              // 组长
              this.groupleader.Membershipgroup = element.GroupLeader;
              // 副组长
              this.Deputygroupleader.MembershipDeputygroup =
                element.GroupDeputy;
              // 小组成员
              this.Groupmembers.Membershipcomposition = element.GroupMember;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
      // 小组职责EmergPlan_SpecRspMrs_RscGroupDuty
      getLists("EmergPlan_SpecRspMrs_RscGroupDuty")
        .then((data) => {
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            if (element.PlanName === this.parentPlanName.PlanName) {
              if (element.Category === "组长") {
                //  职责要求
                this.groupleader.Responsibilitiesandrequirementsoftheteamleader =
                  Object.keys(element).reduce((acc, key) => {
                    if (key.startsWith("Claim")) {
                      // 只处理以"Claim"开头的属性
                      if (element[key] !== null && element[key] !== "") {
                        acc.push({ value: element[key] });
                      }
                    }
                    return acc;
                  }, []);
                if (
                  this.groupleader
                    .Responsibilitiesandrequirementsoftheteamleader.length == 0
                ) {
                  this.groupleader.Responsibilitiesandrequirementsoftheteamleader.push(
                    { value: "" }
                  );
                }
                //  应急职责
                this.groupleader.Emergencyresponsibilitiesoftheteamleader =
                  Object.keys(element).reduce((acc, key) => {
                    if (key.startsWith("Duty")) {
                      // 只处理以"Claim"开头的属性
                      if (element[key] !== null && element[key] !== "") {
                        acc.push({ value: element[key] });
                      }
                    }
                    return acc;
                  }, []);
                if (
                  this.groupleader.Emergencyresponsibilitiesoftheteamleader
                    .length == 0
                ) {
                  this.groupleader.Emergencyresponsibilitiesoftheteamleader.push(
                    { value: "" }
                  );
                }
              }
              if (element.Category === "副组长") {
                //  应急职责
                this.Deputygroupleader.Emergencyresponsibilitiesofdeputyteamleader =
                  Object.keys(element).reduce((acc, key) => {
                    if (key.startsWith("Duty")) {
                      // 只处理以"Claim"开头的属性
                      if (element[key] !== null && element[key] !== "") {
                        acc.push({ value: element[key] });
                      }
                    }
                    return acc;
                  }, []);
                if (
                  this.Deputygroupleader
                    .Emergencyresponsibilitiesofdeputyteamleader.length == 0
                ) {
                  this.Deputygroupleader.Emergencyresponsibilitiesofdeputyteamleader.push(
                    { value: "" }
                  );
                }
              }
              if (element.Category === "成员") {
                const groupValue = element.Group || ""; // 获取 Group 属性的值，如果为空则设置为空字符串
                const disposalSteps = Object.keys(element).reduce(
                  (acc, key) => {
                    if (key.startsWith("Duty") && element[key] !== null) {
                      // 只处理以 "Duty" 开头且非空的属性
                      acc.push({ value: element[key] });
                    }
                    return acc;
                  },
                  []
                );

                if (disposalSteps.length > 0) {
                  this.Groupmembers.Disposalstepslist.push({
                    GroupName: groupValue,
                    Emergencyresponsibilitiesofteammembers: disposalSteps,
                  });
                } else {
                  this.Groupmembers.Disposalstepslist.push({
                    GroupName: "",
                    Emergencyresponsibilitiesofteammembers: [{ value: "" }],
                  });
                }
              }
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getFormData() {
      return {
        groupleader: this.groupleader,
        Deputygroupleader: this.Deputygroupleader,
        Groupmembers: this.Groupmembers,
      };
    },
    showCard(index) {
      this.selectedCard = this.list[index];
    },
    // 组长应急职责 输入框内容
    teamupdateContentd(innerIndex) {
      const content =
        this.groupleader.Emergencyresponsibilitiesoftheteamleader[innerIndex];
    },
    // 组长应急职责 加号
    teamaddContentd(innerIndex) {
      // const newContent = { value: "" };
      // this.groupleader.Emergencyresponsibilitiesoftheteamleader.splice(
      //   innerIndex + 1,
      //   0,
      //   newContent
      // );
      const newContent = { value: "" };
      const contents =
        this.groupleader.Emergencyresponsibilitiesoftheteamleader;

      // 检查当前内容数量是否已经达到上限
      if (contents.length >= 10) {
        this.$message.error("内容数量已达到上限");
        return;
      }
      contents.splice(innerIndex + 1, 0, newContent);
    },
    // 组长应急职责 减号
    teamremoveContentd(innerIndex) {
      if (
        this.groupleader.Emergencyresponsibilitiesoftheteamleader.length > 1
      ) {
        this.groupleader.Emergencyresponsibilitiesoftheteamleader.splice(
          innerIndex,
          1
        );
      }
    },
    // 组长职责要求输入框内容
    ResponsibilitiesupdateContentd(innerIndex) {
      const content =
        this.groupleader.Responsibilitiesandrequirementsoftheteamleader[
          innerIndex
        ];
    },
    // 组长职责要求加号
    ResponsibilitiesaddContentd(innerIndex) {
      // const newContent = { value: "" };
      // this.groupleader.Responsibilitiesandrequirementsoftheteamleader.splice(
      //   innerIndex + 1,
      //   0,
      //   newContent
      // );
      const newContent = { value: "" };
      const contents =
        this.groupleader.Responsibilitiesandrequirementsoftheteamleader;

      // 检查当前内容数量是否已经达到上限
      if (contents.length >= 10) {
        this.$message.error("内容数量已达到上限");
        return;
      }
      contents.splice(innerIndex + 1, 0, newContent);
    },
    // 组长职责要求减号
    ResponsibilitiesremoveContentd(innerIndex) {
      if (
        this.groupleader.Responsibilitiesandrequirementsoftheteamleader.length >
        1
      ) {
        this.groupleader.Responsibilitiesandrequirementsoftheteamleader.splice(
          innerIndex,
          1
        );
      }
    },
    // 副组长应急职责 输入框内容
    EmergencyupdateContentd(innerIndex) {
      const content =
        this.Deputygroupleader.Emergencyresponsibilitiesofdeputyteamleader[
          innerIndex
        ];
    },
    // 副组长应急职责 加号
    EmergencyaddContentd(innerIndex) {
      // const newContent = { value: "" };
      // this.Deputygroupleader.Emergencyresponsibilitiesofdeputyteamleader.splice(
      //   innerIndex + 1,
      //   0,
      //   newContent
      // );

      const newContent = { value: "" };
      const contents =
        this.Deputygroupleader.Emergencyresponsibilitiesofdeputyteamleader;

      // 检查当前内容数量是否已经达到上限
      if (contents.length >= 10) {
        this.$message.error("内容数量已达到上限");
        return;
      }
      contents.splice(innerIndex + 1, 0, newContent);
    },
    // 副组长应急职责 减号
    EmergencyremoveContentd(innerIndex) {
      if (
        this.Deputygroupleader.Emergencyresponsibilitiesofdeputyteamleader
          .length > 1
      ) {
        this.Deputygroupleader.Emergencyresponsibilitiesofdeputyteamleader.splice(
          innerIndex,
          1
        );
      }
    },
    // 小组名称+
    addContentWithDealExecutor(contentIndex) {
      const newItem = {
        GroupName: "", //小组名称
        // 小组成员应急职责
        Emergencyresponsibilitiesofteammembers: [{ value: "" }],
      };
      this.Groupmembers.Disposalstepslist.splice(contentIndex + 1, 0, newItem);
    },
    // 小组名称-
    removeContent(contentIndex) {
      if (this.Groupmembers.Disposalstepslist.length > 1) {
        this.Groupmembers.Disposalstepslist.splice(contentIndex, 1);
      }
    },
    //小组成员应急职责输入框内容
    updateContent(contentIndex, innerIndex) {
      const content =
        this.Groupmembers.Disposalstepslist[contentIndex]
          .Emergencyresponsibilitiesofteammembers[innerIndex];
    },
    // 小组成员应急职责+
    addContents(contentIndex, innerIndex) {
      const newContent = { value: "" };
      const contents =
        this.Groupmembers.Disposalstepslist[contentIndex]
          .Emergencyresponsibilitiesofteammembers;

      // 检查当前内容数量是否已经达到上限
      if (contents.length >= 10) {
        this.$message.error("内容数量已达到上限");
        return;
      }
      contents.splice(innerIndex + 1, 0, newContent);
    },
    // 小组成员应急职责-
    removeContents(contentIndex, innerIndex) {
      if (
        this.Groupmembers.Disposalstepslist[contentIndex]
          .Emergencyresponsibilitiesofteammembers.length > 1
      ) {
        this.Groupmembers.Disposalstepslist[
          contentIndex
        ].Emergencyresponsibilitiesofteammembers.splice(innerIndex, 1);
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.selectedCard = this.list[0]; // 将选中项目设为组长
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.title != "添加") {
      this.xiaozu();
    } else {
      this.Groupmembers.Disposalstepslist.push({
        GroupName: "",
        Emergencyresponsibilitiesofteammembers: [{ value: "" }, { value: "" }],
      });
    }
    console.log(this.parentPlanName);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.box-card1 {
  ::v-deep .el-card__body {
    padding: 0;
  }
}
.selected {
  color: #038ff3;
}

.textitem {
  cursor: pointer;
  width: 125%;
  margin-left: -20px;
  line-height: 39px;
}

.xiaozu {
  width: 1390px;
  display: flex;
  font-size: 14px;
  color: #606266;
  line-height: 36px;
  font-weight: 700;
}

.zuzhang {
  width: 500px;
  display: flex;
}

.input {
  margin-left: 25px;
}
.borderNone ::v-deep .el-textarea__inner {
  border: none;
  height: 100%;
}
.zuzhi {
  display: flex;
  width: 1394px;
}
.zuze {
  line-height: 36px;
  font-size: 15px;
  color: #606266;
  font-weight: 700;
  width: 76px;
  margin-top: 20px;
}
.yingji {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.chengyuan {
  line-height: 36px;
  font-size: 15px;
  color: #606266;
  font-weight: 700;
  width: 91px;
}
.xuhao {
  display: flex;
  flex-wrap: wrap;
  width: 517px;
  margin-top: 20px;
}
.wenzi {
  line-height: 34px;
}
.chenginput {
  width: 372px;
}
.yingjizhiz {
  margin-left: 8px;
  width: 372px;
}
</style>
